<template>
  <div v-for="(item, index) in tableItemConfigGroup" :key="item.type">
    <div class="name" v-if="item.type === 'name'">
      <div v-if="showType == 'ADD'">
        <a-input
          v-model:value="valueName"
          @blur="
            () => {
              inputValueName(item);
            }
          "
          :class="required ? 'color' : ''"
        />
        <span v-if="required" class="holder">请输入</span>
      </div>
      <div v-else>
        <a-select
          :dropdownStyle="{ minHeight: '350px', minWidth: '350px' }"
          :style="[{ width: '100%' }, required ? { border: '1px solid red' } : {}]"
          v-model:value="valueName"
          show-search
          placeholder="请输入"
          :filter-option="filterOption"
          @search="changeValue(valueName)"
          @dropdownVisibleChange="handelTable(valueName)"
        >
          <template #notFoundContent>
            <div><a-table :pagination="false" :dataSource="fileNameData" :columns="fileNamColumn" :customRow="rowClick" /></div>
          </template>
        </a-select>
        <span v-if="required" class="holder">请输入</span>
      </div>
    </div>
    <div class="type" v-if="item.type === 'directoryId'">
      <a-tree-select
        v-model:value="valueType"
        v-model:searchValue="searchValueType"
        show-search
        :style="[{ width: '100%' }, required ? { border: '1px solid red' } : {}]"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto', minWidth: '250px' }"
        placeholder="请选择"
        allow-clear
        :field-names="{ label: 'name', value: 'id', children: 'children' }"
        tree-default-expand-all
        :tree-data="treeDataType"
        @dropdownVisibleChange="getFileTree"
        @blur="
          (item) => {
            inputValueType(item);
          }
        "
        @select="testChange2"
      >
        <template #suffixIcon>
          <SearchOutlined style="color: #999" />
        </template>
      </a-tree-select>
      <span v-if="required" class="holder">请选择</span>
    </div>
    <div class="securityLevel" v-if="item.type === 'securityLevel'">
      <a-cascader
        :style="[{ width: '110px' }, required ? { border: '1px solid red' } : {}]"
        v-model:value="valueSecurityLevel"
        :options="LevelOptions"
        :allowClear="false"
        placeholder="请选择"
        @blur="
          (item) => {
            inputValueSecurityLevel(item);
          }
        "
      />
      <span v-if="required" class="holder">请选择</span>
    </div>
    <div class="isTemplate" v-if="item.type === 'isTemplate'">
      <a-cascader
        :style="[{ width: '110px' }, required ? { border: '1px solid red' } : {}]"
        v-model:value="valueIsTemplate"
        :options="templateOptions"
        :allowClear="false"
        placeholder="请选择"
        @blur="
          (item) => {
            inputValueIsTemplate(item);
          }
        "
      />
      <span v-if="required" class="holder">请选择</span>
    </div>
    <div class="principalId" v-if="item.type === 'principalId'">
      <a-tree-select
        v-model:value="valuePerson"
        v-model:searchValue="searchValuePerson"
        show-search
        :style="[{ width: '100%' }, required ? { border: '1px solid red' } : {}]"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto', minWidth: '250px' }"
        placeholder="请选择"
        :allow-clear="false"
        :field-names="{
          children: 'childOrg',
          label: 'name',
          value: 'id'
        }"
        tree-default-expand-all
        :tree-data="treeData"
        tree-node-filter-prop="name"
        @dropdownVisibleChange="getSubjectTree"
        @blur="
          (item) => {
            inputValuePerson(item);
          }
        "
      />
      <span v-if="required" class="holder">请选择</span>
    </div>
    <div class="counterSignIds" v-if="item.type === 'counterSignIds'">
      <a-tree-select
        v-model:value="valueSignedBy"
        v-model:searchValue="searchValueSignedBy"
        :showSearch="true"
        :style="[{ width: '100%' }, required ? { border: '1px solid red' } : {}]"
        :tree-data="treeData"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto', minWidth: '250px' }"
        tree-checkable
        allow-clear
        :field-names="{
          children: 'childOrg',
          label: 'name',
          value: 'id'
        }"
        :show-checked-strategy="SHOW_PARENT"
        tree-default-expand-all
        placeholder="请选择"
        tree-node-filter-prop="name"
        @dropdownVisibleChange="getSubjectTree"
        @blur="
          (item) => {
            inputValueSignedBy(item);
          }
        "
      >
        <template #suffixIcon>
          <SearchOutlined style="color: #999" />
        </template>
      </a-tree-select>
      <span v-if="required" class="holder">请选择</span>
    </div>

    <div class="keyword" v-if="item.type === 'keyword'">
      <a-input
        v-model:value="valueKeyword"
        @blur="
          () => {
            inputValueKeyword(item);
          }
        "
        :class="required ? 'color' : ''"
      />
      <span v-if="required" class="holder">请输入</span>
    </div>

    <div class="mainContent" v-if="item.type === 'mainContent'">
      <a-input
        v-model:value="valueMainContent"
        @blur="
          () => {
            inputValueMainContent(item);
          }
        "
        :class="required ? 'color' : ''"
      />
      <span v-if="required" class="holder">请输入</span>
    </div>

    <div class="applyReason" v-if="item.type === 'applyReason'">
      <a-input
        v-model:value="valueApplyReason"
        @blur="
          () => {
            inputValueApplyReason(item);
          }
        "
        :class="required ? 'color' : ''"
      />
      <span v-if="required" class="holder">请输入</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { TreeSelectProps, CascaderProps } from 'ant-design-vue';
import type { SelectProps } from 'ant-design-vue';
import { TreeSelect } from 'ant-design-vue';
import { ExclamationCircleOutlined, DownOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { fileTree } from '@/config/api/publicFile';
import { fileByName } from '@/config/api/documentApplication';
import { treeDataSubject } from '@/config/api/documentApplication';
import { message, Modal } from 'ant-design-vue';
import { defineComponent, ref, watch, inject, getCurrentInstance, onMounted, reactive } from 'vue';
const { proxy } = getCurrentInstance();
const showType = inject('showType').showType;
const props = defineProps({
  dataIndex: String,
  recordData: Object,
  tableItemConfig: Function
});
const tableItemConfigGroup = reactive(props.tableItemConfig());
const required = ref(false);
const emit = defineEmits(['recordName', 'recordType', 'recordSecurityLevel', 'recordIsTemplate', 'recordPerson', 'recordSignedBy', 'recordKeyword', 'recordMainContent', 'recordApplyReason']);

// 文件名称下拉
const fileNamColumn = [
  {
    title: '文件名称',
    dataIndex: 'fileName',
    key: 'fileName',
    align: 'center'
  },
  {
    title: '文件编码',
    dataIndex: 'code',
    key: 'code',
    align: 'center'
  }
];
const fileNameData = [
  {
    key: '1',
    fileName: '文件一',
    code: '11'
  },
  {
    key: '2',
    fileName: '文件二',
    code: '22'
  },
  {
    key: '3',
    fileName: '文件二',
    code: '22'
  }
];
// const handelTable = () => {};

// 文件类型树状
const valueType = ref<number>(null);
const searchValueType = ref('');
const treeDataType = ref<TreeSelectProps['treeData']>([]);
const typeData = ref([]);
const inputValueType = ({ on }) => {
  required.value = false;
  if (valueType.value === null) {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  console.log('valueType', valueType.value);
  // emit('recordType', valueType.value);
  on.recordType(valueType.value);
};

const testChange2 = (e) => {
  console.log('eee2', e);
};

const getFileTree = () => {
  const params = {
    name: ''
  };
  fileTree(params).then((result) => {
    if (result.success) {
      typeData.value = result.data;
      treeDataType.value = [
        {
          name: '全部',
          children: result.data
        }
      ];
    }
  });
};
// watch(valueType, () => {
//   if (valueType.value === '') {
//     message.warning('此为必填项');
//     return;
//   }
//   emit('recordType', valueType.value);
// });

// 保密等级下拉
const valueSecurityLevel = ref([]);
const LevelOptions: CascaderProps['options'] = [
  {
    label: '公开',
    value: '公开'
  },
  {
    label: '机密',
    value: '机密'
  },
  {
    label: '绝密',
    value: '绝密'
  },
  {
    label: '秘密',
    value: '秘密'
  }
];
const securityLevel = ref<number>();
const inputValueSecurityLevel = ({ on }) => {
  required.value = false;
  if (valueSecurityLevel.value.length === 0) {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  if (valueSecurityLevel.value[0] == '公开') {
    securityLevel.value = 4;
  } else if (valueSecurityLevel.value[0] == '机密') {
    securityLevel.value = 2;
  } else if (valueSecurityLevel.value[0] == '绝密') {
    securityLevel.value = 1;
  } else if (valueSecurityLevel.value[0] == '秘密') {
    securityLevel.value = 3;
  }
  console.log('SecurityLevel', securityLevel.value);
  // emit('recordSecurityLevel', securityLevel.value);
  on.recordSecurityLevel(securityLevel.value);
};
// watch(valueSecurityLevel, () => {
//   if (valueSecurityLevel.value.length === 0) {
//     message.warning('此为必填项');
//     return;
//   }
//   emit('recordSecurityLevel', ...valueSecurityLevel.value);
// });
// 是否文件模板
const valueIsTemplate = ref<string>('');
const templateOptions: CascaderProps['options'] = [
  {
    label: '是',
    value: '是'
  },
  {
    label: '否',
    value: '否'
  }
];
const isTemplate = ref<number>();
const inputValueIsTemplate = ({ on }) => {
  required.value = false;
  if (valueIsTemplate.value.length === 0) {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  if (valueIsTemplate.value[0] == '是') {
    isTemplate.value = 0;
  } else if (valueIsTemplate.value[0] == '否') {
    isTemplate.value = 1;
  }
  console.log('isTemplate', isTemplate.value);

  emit('recordIsTemplate', ...valueIsTemplate.value);
  on.recordIsTemplate(...valueIsTemplate.value);
};
// watch(valueIsTemplate, () => {
//   if (valueIsTemplate.value.length === 0) {
//     message.warning('此为必填项');
//     return;
//   }
//   emit('recordIsTemplate', ...valueIsTemplate.value);
// });
// 文件负责人和文件会签人下拉
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const valuePerson = ref<string>();
const valueSignedBy = ref([]);
const searchValueSignedBy = ref('');
const searchValuePerson = ref('');
const treeData = ref<TreeSelectProps['treeData']>([]);
const getSubjectTree = () => {
  const params = {
    parentId: 0
  };
  treeDataSubject(params).then((res) => {
    if (res.success) {
      treeData.value = filter(res.data);
      // treeDataSignedBy.value = handleDeepTree(res.data);
    }
  });
};
function filter(list: any) {
  list.forEach((item) => {
    const { subjectSimpleList, childOrg } = item;
    if (subjectSimpleList?.length > 0) {
      item.childOrg = [...childOrg, ...subjectSimpleList.map(({ id, nickName }) => ({ id, name: nickName }))];
    }
  });
  return list;
}
// const handleDeepTree = (list: any) => {
//   if (list?.length === 0 || !list) return false;
//   list.map((item: any) => {
//     if (Array.isArray(item.childOrg) && item.subjectSimpleList?.length > 0) {
//       item.subjectSimpleList.map((val: any) => {
//         item.childOrg.push({ ...val, name: val.nickName });
//       });
//     }
//     handleDeepTree(item.childOrg);
//   });
//   return list;
// };
const inputValuePerson = ({ on }) => {
  required.value = false;
  if (valuePerson.value === undefined) {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  console.log('valuePerson', valuePerson.value);
  on.recordPerson(valueSignedBy.value);
};
// watch(valuePerson, () => {
//   if (valuePerson.value === '') {
//     message.warning('此为必填项');
//     return;
//   }
//   emit('recordPerson', valuePerson.value);
// });
const inputValueSignedBy = ({ on }) => {
  required.value = false;
  if (valueSignedBy.value.length === 0) {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  on.recordSignedBy(valueSignedBy.value);
};
// watch(valueSignedBy, () => {
//   if (valueSignedBy.value.length === undefined) {
//     message.warning('此为必填项');
//     return;
//   }
//   emit('recordSignedBy', valueSignedBy.value);
// });
// 获取输入框值
const valueKeyword = ref<string>('');
const inputValueKeyword = ({ on }) => {
  required.value = false;
  if (valueKeyword.value === '') {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  on.recordKeyword(valueKeyword.value);
};
const valueMainContent = ref<string>('');
const inputValueMainContent = ({ on }) => {
  required.value = false;
  if (valueMainContent.value === '') {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  on.recordMainContent(valueMainContent.value);
};
const valueApplyReason = ref<string>('');
const inputValueApplyReason = ({ on }) => {
  required.value = false;
  if (valueApplyReason.value === '') {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  on.recordApplyReason(valueApplyReason.value);
};
const valueName = ref<string>('222');
const inputValueName = ({ on }) => {
  required.value = false;
  if (valueName.value === '') {
    required.value = true;
    message.warning('此为必填项');
    return;
  }
  on.recordName(valueName.value);
};
const dataList = ref({});
const handelTable = async (e) => {
  required.value = false;
  if (valueName.value === '') {
    message.warning('此为必填项');
  }
  const params = { name: e };
  const result = await fileByName(params);
  if (result.success) {
    const data = {
      name: e,
      code: '1',
      directoryId: '1',
      version: '1',
      securityLevel: 1,
      isTemplate: 1,
      principalId: 1,
      counterSignIds: [1],
      keyword: '1',
      mainContent: '1',
      applyReason: '111',
      attachmentFile: '1',
      remark: '1',
      size: 1
    };
    emit('recordName', data);
    dataList.value = data;
    valueApplyReason.value = data.applyReason;
    valueMainContent.value = data.mainContent;
    valueType.value = data.type;
    valueSecurityLevel.value = data.securityLevel;
    valueIsTemplate.value = data.isTemplate;
    valuePerson.value = data.principalId;
    valueKeyword.value = data.keyword;
    valueSignedBy.value = data.counterSignIds;
  }
};
</script>
<style lang="less" scoped>
.color {
  border-color: red;
}
.holder {
  color: red;
}
</style>
